<template>
  <div class="home">
    <a-input-search
      v-model:value="searchParams.text"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <Index />
    <!-- {{ JSON.stringify(searchParams) }} -->
    <a-tabs v-model:activeKey="activeKey" @change="changeTab">
      <a-tab-pane key="post" tab="帖子">
        <Post :datalist="dataList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片" force-render>
        <Picture :datalist="dataList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <User :datalist="dataList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import Post from "@/components/tab/PostCpn.vue";
import Picture from "@/components/tab/PictureCpn.vue";
import User from "@/components/tab/UserCpn.vue";
import Index from "@/components/Split/indexView.vue";
import { useRoute, useRouter } from "vue-router";
import service from "@/utils/request";
const route = useRoute();
const router = useRouter();
const activeKey = route.params.category;
const initSearchParams = {
  text: "",
  pageSize: 10,
  pageNum: 1,
  type: activeKey,
};
const searchParams = ref(initSearchParams);

const postList = ref([]);
// pictureList
const pictureList = ref([]);
// 用户列表
const userList = ref([]);
const dataList = ref([]);

// 监听搜索框
// 监听路由变化
watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: route.query.text,
  } as any;
});

const loadDataold = (params: any = "") => {
  const postQuery = {
    ...initSearchParams,
    searchText: params,
  };
  // interface Props {}
  service.post("post/list/page/vo", postQuery).then((res: any) => {
    postList.value = res.records;
  });
  const pictureQuery = {
    ...initSearchParams,
    searchText: params,
  };
  service.post("picture/search/page/vo", pictureQuery).then((res: any) => {
    pictureList.value = res.records;
  });
  const userQuery = {
    ...initSearchParams,
    userName: params,
  };
  service.post("user/list/page/vo", userQuery).then((res: any) => {
    userList.value = res.records;
  });
};
const loadData = (params: any = "", tabType: any = "post") => {
  const searchQuery = {
    ...initSearchParams,
    searchText: params,
    type: tabType,
  };
  service.post("/search/all", searchQuery).then((res: any) => {
    dataList.value = res.dataList?.records;
    // postList.value = res.postList?.records;
    // pictureList.value = res.pictureList?.records;
    // userList.value = res.userList?.records;
  });
};
loadData(route.query.text, activeKey);
// 方法区
const onSearch = (value: string) => {
  router.push({
    query: searchParams.value,
  });
  const type = route.params.category;
  loadData(value, type);
};
// 切换标签页
const changeTab = (key: string) => {
  router.push({ path: key, query: searchParams.value });
  loadData(searchParams.value.text, key);
};
</script>

<style scoped></style>
